<!DOCTYPE html>
<html>
  <head>
    <style>
      .outer {
        /* position: relative; */
        background-color: #ddd;
        width: 500px;
        height: 500px;
        margin: 200px auto 0;
        /* overflow: auto; */
        border: transparent 1px solid;
      }

      .inner {
        border: 1px solid red;
        overflow: auto;
        height: 300px;
        box-sizing: border-box;
        margin: 100px;
        padding: 10px;
      }

      .anchor {
        position: sticky;
        width: 100px;
        height: 100px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: cadetblue;
      }
      /* =============================== */
      .item {
        display: flex;
      }
      .item > * {
        flex: 0 0 auto;
      }
      .item > div:not(.anchor) {
        /* background-image: linear-gradient(45deg, red, blue, green); */
        width: 800px;
        height: 800px;
      }
    </style>
    <style>
      .box {
        line-height: 20px;
      }
      .box span {
        line-height: 96px;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner">
        <div class="item">
          <div></div>
          <div class="anchor">1</div>
          <div></div>
        </div>
        <div class="item">
          <div></div>
          <div class="anchor">2</div>
          <div></div>
        </div>
        <div class="item">
          <div></div>
          <div class="anchor">3</div>
          <div></div>
        </div>
      </div>
    </div>
    <div class="box" style="line-height: 96px">
      1<span style="line-height: 20px; display: inline-block">内容...</span>2
    </div>
  </body>
</html>
